import React, { Component} from 'react'
import { View, Text, StyleSheet, TouchableOpacity, ScrollView } from 'react-native'
import commonStyle from '../../libs/commonStyle'
import pxToDp, { deviceHeightDp, deviceWidthDp } from '../../libs/pxToDp'
import Iconfont from '../../components/iconfont'

const itemWidth = pxToDp(140)
export default class Tabs extends Component {
	constructor(arg) {
	    super(arg)
		this.state = {
			activeIndex: 0,
			showPanel: false
		}
	}
	render () {
		let {lists = [], activeIndex} = this.props
		// let {activeIndex} = this.state
		return (
		<View style={[commonStyle.posRelative, this.state.showPanel ? commonStyle.hp100: '']}>
			<View style={[commonStyle.flexRow]}>
				<ScrollView ref="scroll" showsHorizontalScrollIndicator={false} horizontal={true} style={[styles.tabs, commonStyle.h120, commonStyle.flexItem]}>
					<View style={[styles.tabbar, commonStyle.borderBottom]}>
						{
							lists.map((item, index) => {
								return (
									<TouchableOpacity 
										activeOpacity={0.8}
										onPress={()=>{
											index > 3 ? this.refs.scroll.scrollTo({x: deviceWidthDp*index/lists.length, y:0, animated:true}) : ''
											this.props.onTabChange && this.props.onTabChange(index)
										}}
										key="index" 
										style={[styles.tabbarItemFlex, commonStyle.pl20, commonStyle.pr20, activeIndex === index? styles.activeBorder:'' ]}>
										<Text style={[activeIndex === index? commonStyle.activeColor: '' ]}>{item.name}</Text>
									</TouchableOpacity>
								)
							})
						}
					</View>
				</ScrollView>
				{
					lists.length > 5 && (
					<TouchableOpacity 
						onPress={() => {
							this.setState({
								showPanel: true
							})
						}}
						style={[commonStyle.w90, commonStyle.flexCenter]}>
						<Iconfont name="below_line" style={[commonStyle.f40, commonStyle.fontBold]} />
					</TouchableOpacity>)
				}
			</View>
			{
				this.state.showPanel && (
					<View style={{
						position:'absolute', 
						top: 0,
						left:0,
						right: 0,
						bottom: 0,
						zIndex: 999,
						backgroundColor: 'rgba(0, 0, 0, .3)'}}>
						<View style={[
							commonStyle.wp100, 
							commonStyle.backgroundColorWhite, 
							commonStyle.p30]}>
							<View style={[commonStyle.flexRow, commonStyle.flexJustifyBetween]}>
								<Text>我的频道</Text>
								<TouchableOpacity 
									style={[commonStyle.w100, commonStyle.h100, commonStyle.flexCenter]}
									onPress={() => {
										this.setState({
											showPanel: false
										})
								}}>
								<Iconfont name="close_line" style={[commonStyle.f50, commonStyle.fontBold]} />
								</TouchableOpacity>
							</View>
							<View style={[commonStyle.flexRow, commonStyle.flexWrap, commonStyle.backgroundColorWhite, ]}>
							{
								lists.map((item, index) => {
									return (
									<TouchableOpacity 
										style={[
										commonStyle.m20, 
										commonStyle.p20, 
										commonStyle.border, 
										commonStyle.circle10,
										commonStyle.backgroundColorGray]}
										onPress={()=> {
											this.refs.scroll.scrollTo({x: deviceWidthDp*index/lists.length, y:0, animated:true})
											this.props.onTabChange && this.props.onTabChange(index)
											this.setState({
												showPanel: false
											})
										}}>
										<Text>{item.name}</Text>
									</TouchableOpacity>
									)
								})
							}
							</View>
						</View>
					</View>
				)
			}
		</View>
		)
	}
}

const styles = StyleSheet.create({
	tabs: {
	},
	tabbar: {
		minWidth: deviceWidthDp,
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'center'
	},
	tabbarItem: {
		width: itemWidth,
		flex: 1,
		alignItems: 'center',
		justifyContent: 'center'
	},
	tabbarItemFlex: {
		flex: 1,
		height:'100%',
		alignItems: 'center',
		justifyContent: 'center'
	},
	activeLine: {
		height: pxToDp(6),
		backgroundColor: '#C30D23'
	},
	activeBorder: {
		borderBottomWidth: pxToDp(6),
		borderBottomColor: '#C30D23'
	}
})